<div class="register">
    <md-card>
        <md-card-header>
            <md-card-title style="font-size:18px;">用户注册</md-card-title>
        </md-card-header>
        <form [formGroup]="form">
            <md-input-container class="full-width">
                <input mdInput placeholder="用户名" required name="username" minlength="4" type="url" [formControl]="form.controls['username']">

                <md-error *ngIf="form.controls['username'].hasError('required')">
                    用户名必填！
                </md-error>
                <md-error *ngIf="form.controls['username'].hasError('rangeErr')">
                    用户名长度最小4位，最多10位！
                </md-error>

            </md-input-container>
            <table class="full-width">
                <tr>
                    <td>
                        <md-input-container class="full-width ">
                            <input mdInput placeholder="密码 " name="password " type="password">
                        </md-input-container>
                    </td>
                    <td>

                        <md-input-container class="full-width ">
                            <input mdInput placeholder="确认密码 " name="cfmPassword " type="password">
                        </md-input-container>
                    </td>
                </tr>
            </table>

            <md-input-container class="full-width ">
                <input mdInput placeholder="手机号码 " name="cellphone " type="number">
            </md-input-container>

            <md-input-container class="full-width ">
                <input mdInput placeholder="验证码 " name="capCode " type="text">
            </md-input-container>
            <p style="text-align: center">
                <label><md-checkbox checked=true>同意</md-checkbox><a href (click)="openDialog() ">《新用户协议》</a></label>
            </p>
            <button md-raised-button color="primary" class="full-width "> 注册</button>
        </form>
    </md-card>
</div>